<!-- 统计弹窗 -->

<template>
  <WebModal path="statistic" showTitle="查看本题答卷" large noFooter>
    <WebTable v-if="answer_list.length" :key="statistic_one.no" path="answer" v-bind="tableProps" noPage>
      <RowIndex fixLeft />

      <RowTitle label="用户名称" bind="answerUserName" :width="120" fixLeft />

      <RowTime label="提交时间" bind="createTime" fixLeft />

      <component :is="getComponent(item)" v-bind="getProps(item)">
        <component
          v-for="sub in item.questionList"
          :key="sub.id"
          :is="getSubComponent(sub)"
          v-bind="getSubProps(item, sub)"
        >
          <RowText v-for="(subSub, j) in sub.questionList" :key="subSub.id" v-bind="getSubSubProps(item, subSub, j)" />
        </component>
      </component>

      <RowOperate :btns="['show']" show="查看完整答卷" :width="120" fixRight />
    </WebTable>

    <el-empty v-else description="暂无答卷" />
  </WebModal>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'StatisticModal',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [CORE.mixWeb(), CORE.mixWeb('statistic', 'statistic_'), CORE.mixWeb('answer', 'answer_')],

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 当前问题
     */
    item() {
      const { one: { questionList }, statistic_one: { no } } = this
      return questionList.find((item) => item.no === no) || { type: '', title: '' }
    },

    /**
     * 表格属性
     */
    tableProps() {
      const { item } = this
      if (item.type === 'textareaTable') return { tripleHead: true }
      if (item.type.includes('Table')) return { doubleHead: true }
      return null
    },
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 获取组件名称
     */
    getComponent({ type }) {
      return type.includes('Table') ? 'el-table-column' : 'RowText'
    },

    /**
     * 获取组件属性
     */
    getProps(item) {
      const { no, title } = item
      const text = title.length <= 40 ? title : `${title.slice(0, 40)}...`
      return {
        label: `${no}. ${text}`,
        bind: `no_${no}`,
        minWidth: 150,
        align: 'center',
      }
    },

    /**
     * 获取子组件名称
     */
    getSubComponent({ type }) {
      return type === 'textarea' ? 'el-table-column' : 'RowText'
    },

    /**
     * 获取子组件属性
     */
    getSubProps(item, sub) {
      const { no, title } = sub
      const getLen = () => {
        if (sub.type === 'textarea') return item.optionList.length * 9 - 4
        switch (item.questionList.length) {
          case 1: return 40
          case 2: return 18
          case 3: return 10
          case 4: return 8
          default: return 6
        }
      }
      const len = getLen()
      const text = title.length <= len ? title : `${title.slice(0, len)}...`
      return {
        label: `${no}. ${text}`,
        bind: `no_${item.no}_${no}`,
        minWidth: 150,
        align: 'center',
      }
    },

    /**
     * 获取子子组件属性
     */
    getSubSubProps(item, subSub, j) {
      const { content } = (item.optionList || [])[j]
      const text = content.length <= 8 ? content : `${content.slice(0, 8)}...`
      return {
        label: text,
        bind: `no_${item.no}_${subSub.no}`,
        minWidth: 150,
      }
    },
  },
}
</script>
